<template>
	<view>
		<!-- 骨架屏占位 -->
		<view class="container u-skeleton" v-show="showSkeleton">
			<view class="top-img u-skeleton-rect"></view>
			<view class="box">
				<view class="author u-flex">
					<view class="avatar u-skeleton-circle"></view>
					<view class="nickname u-skeleton-fillet"></view>
				</view>
				<view class="title u-skeleton-fillet"></view>
				<view class="text"><view class="u-skeleton-fillet" v-for="(item, index) in 6" :key="index"></view></view>
			</view>
		</view>
		<!-- 顶部组件 -->
		<view class="top">
			<u-navbar :is-back="false" :background="{ background: isReading ? '#fff' : 'transparent' }" :border-bottom="isReading" id="nav-bar">
				<view class="back u-flex" :style="{ background: isReading ? 'transparent' : 'rgba(0,0,0,.2)' }" @click="back">
					<u-icon custom-prefix="custom-icon" name="arrow-left" :color="isReading ? '#333' : '#fff'"></u-icon>
				</view>
				<view class="author u-flex" v-if="isReading">
					<image :src="article.author.avatar" mode="aspectFit"></image>
					<text class="nickname">{{ article.author.nickname }}</text>
				</view>
			</u-navbar>
		</view>
		<!-- 文章类型 -->

		<view v-if="article.type == 'article'">
			<!-- 顶部封面图 -->
			<view class="top-img"><image :src="article.pic" mode="widthFix"></image></view>
			<!-- 内容区 -->
			<view class="content">
				<view class="author u-flex" id="author">
					<image :src="article.author.avatar" mode="aspectFit" lazy-load></image>
					<text class="nickname">{{ article.author.nickname }}</text>
					<view class="attention u-flex" @click="attention" :class="{ attentioned: isAttention }">
						<u-icon v-if="isAttention == false" custom-prefix="custom-icon" name="add" color="#fff" size="22"></u-icon>
						<text>{{ isAttention == false ? '关注' : '已关注' }}</text>
					</view>
				</view>
				<view class="title">{{ article.title }}</view>
				<view class="rich-text" v-for="(item, index) in content" :key="index">
					<text class="text" v-if="item.text" :style="{ fontWeight: item.type == 'unstyled' ? 'normal' : 'bold', fontSize: item.type == 'unstyled' ? '28rpx' : '30rpx' }">
						{{ item.text }}
					</text>
					<image class="img" :src="item.data.src" mode="widthFix" v-if="item.data.src && item.type == 'IMAGE'" lazy-load @click="previewImg(item.data.src)"></image>
					<view class="video-box" v-if="item.data.src && item.type == 'VIDEO'">
						<video :src="item.data.src" @ended="videoEnd" controls id="video"></video>
						<image :src="item.data.poster" class="poster" v-show="showPoster"></image>
						<view class="video-mask" v-show="videoMask">
							<!-- 播放按钮 -->
							<view class="play-btn" @click="playVideo"><image src="/static/icon/play.png"></image></view>
						</view>
					</view>
					<view class="goods-card u-flex" v-if="item.type == 'PRODUCT1'" @click="goToGoodsDetail(item.data.gid)">
						<image :src="item.data.img"></image>
						<view class="detail u-flex-col u-row-between">
							<text class="name u-line-2">{{ item.data.name }}</text>
							<view class="price u-flex u-row-between">
								<text>￥{{ item.data.price / 100 }}</text>
								<view class="btn">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 笔记类型 -->
		<view v-if="article.type == 'note' || article.type == 'list'">
			<!-- 顶部封面图 -->
			<view class="top-img" v-if="article.type == 'list'"><image :src="article.pic" mode="widthFix"></image></view>
			<view class="swiper" v-if="article.type == 'note'">
				<swiper :indicator-dots="false" autoplay :interval="3000" :duration="200" circular @change="swiperChange">
					<swiper-item v-for="(item, index) in article.pics" :key="index"><image :src="item" mode="aspectFit"></image></swiper-item>
				</swiper>
				<!-- 轮播图指示器 -->
				<view class="count">
					<span>{{ swiperCurrent + 1 }}</span>
					<span>/</span>
					<span>{{ article.pics.length }}</span>
				</view>
			</view>
			<!-- 内容区 -->
			<view class="content">
				<view class="author u-flex" id="author">
					<image :src="article.author.avatar" mode="aspectFit"></image>
					<text class="nickname">{{ article.author.nickname }}</text>
					<view class="attention u-flex" @click="attention" :class="{ attentioned: isAttention }">
						<u-icon v-if="isAttention == false" custom-prefix="custom-icon" name="add" color="#fff" size="22"></u-icon>
						<text>{{ isAttention == false ? '关注' : '已关注' }}</text>
					</view>
				</view>
				<view class="title">{{ article.title }}</view>
				<view class="basic-text">
					<text>{{ content }}</text>
				</view>
				<view v-if="article.videos.length != 0">
					<view class="video-box" v-for="(item, index) in article.videos" :key="index">
						<video :src="item.src" @ended="videoEnd" controls id="video"></video>
						<image :src="item.poster" class="poster" v-show="showPoster"></image>
						<view class="video-mask" v-show="videoMask">
							<!-- 播放按钮 -->
							<view class="play-btn" @click="playVideo"><image src="/static/icon/play.png"></image></view>
						</view>
					</view>
				</view>
				<view v-if="goodsList.length != 0">
					<view class="goods-card u-flex" v-for="(item, index) in goodsList" :key="index" @click="goToGoodsDetail(item.gid)">
						<image :src="item.img800s" lazy-load></image>
						<view class="detail u-flex-col">
							<text class="name u-line-1">{{ item.customName }}</text>
							<view class="label u-flex">
								<text v-for="(item, index) in item.labels" :key="index">{{ item.text }}</text>
							</view>
							<view class="price u-flex">
								<text>￥{{ item.priceMin / 100 }}</text>
								<text v-if="item.priceTag >= 1">起</text>
								<text class="market-price" v-if="item.marketPrice && item.priceMin != item.marketPrice">￥{{ item.marketPrice / 100 }}</text>
								<view class="btn">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 话题 -->
		<view class="topic u-flex" v-if="article.topic">
			<text class="sign">#</text>
			<text>{{ article.topic }}</text>
		</view>
		<u-gap height="16" bg-color="#f7f8fa" v-if="comment.switch"></u-gap>
		<!-- 评论区 -->
		<view class="comment card" v-if="comment.switch">
			<view class="head u-flex">
				<view class="title">
					全部评论
					<text v-if="comment.data.total">({{ comment.data.total }})</text>
				</view>
				<view class="edit u-flex" @click="commentPop = true">
					<u-icon custom-prefix="custom-icon" name="edit" color="#996b3d" size="32"></u-icon>
					<text>写评论</text>
				</view>
			</view>
			<view class="no-comment u-flex-col" v-if="!comment.data.total">
				<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/af5f0d10-abaf-11ea-b43d-2358b31b6ce6.png"></image>
				<text>沙发还空着，快来抢吧</text>
			</view>
			<view class="have-comment" v-else>
				<view class="item-box">
					<view class="item u-flex" v-for="(item, index) in comment.data.records" :key="index">
						<view style="align-self: flex-start;"><image class="avatar" :src="item.avatar"></image></view>
						<view style="flex: 1">
							<view class="user u-flex">
								<text class="nick-name">{{ item.nickName }}</text>
								<text class="date">{{ item.time | date('mm/dd') }}</text>
								<image v-if="!item.support" class="zan" src="../../../static/icon/feed_pinwei_not_fav.png" @click="giveLike(item)"></image>
								<image v-if="item.support" class="zan" src="../../../static/icon/feed_pinwei_fav.png" @click="giveLike(item)"></image>
								<text v-if="item.supportNum" :style="{ color: item.support ? '#FE1F1D' : '#333' }">{{ item.supportNum }}</text>
								<text v-if="!item.supportNum" @click="giveLike(item)">赞</text>
							</view>
							<view class="text u-line-1">{{ item.text }}</view>
						</view>
					</view>
				</view>
				<view class="all u-flex" @click="commentPop = true">
					<text>查看全部{{ comment.data.total }}条评论</text>
					<!-- <image src="../../../static/icon/arrow_right_brown.png" ></image> -->
					<u-icon custom-prefix="custom-icon" name="right" color="#996b3d" size="28"></u-icon>
				</view>
			</view>
		</view>
		<u-gap height="16" bg-color="#f7f8fa"></u-gap>
		<!-- 推荐内容 -->
		<view class="recommend card">
			<view class="head u-flex"><view class="title">优质内容推荐</view></view>
			<view class="list">
				<u-waterfall v-model="recommendList" ref="uWaterfall" add-time="0">
					<template v-slot:left="{ leftList }">
						<view class="content left">
							<view class="item" v-for="(item, index) in leftList" :key="index" @click="goToDetail(item.contentId)">
								<image class="img" :src="item.pic" mode="widthFix" lazy-load></image>
								<text class="title u-line-2">{{ item.title }}</text>
								<view class="author u-flex">
									<image :src="item.author.avatar"></image>
									<text class="name u-line-1">{{ item.author.nickname }}</text>
									<text class="reading">{{ item.readingNum }}阅读</text>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{ rightList }">
						<view class="content right">
							<view class="item" v-for="(item, index) in rightList" :key="index" @click="goToDetail(item.contentId)">
								<image class="img" :src="item.pic" mode="widthFix" lazy-load></image>
								<text class="title u-line-2">{{ item.title }}</text>
								<view class="author u-flex">
									<image :src="item.author.avatar"></image>
									<text class="name u-line-1">{{ item.author.nickname }}</text>
									<text class="reading">{{ item.readingNum }}阅读</text>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<u-divider bg-color="#fdfdfd" color="#B0B3BA" margin-top="30" margin-bottom="130">END</u-divider>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-menu u-flex">
			<view class="function u-flex">
				<view class="item u-flex" @click="likeArticle">
					<view class="icon-box">
						<image v-show="!likeInfo.like" src="../../../static/icon/feed_pinwei_not_fav.png"></image>
						<image v-show="likeInfo.like" src="../../../static/icon/feed_pinwei_fav.png"></image>
						<text :style="{ color: likeInfo.like ? '#FE1F1D' : '#292A2D' }" v-if="likeInfo.likeNum">{{ likeInfo.likeNum }}</text>
					</view>
				</view>
				<view class="item u-flex" v-if="comment.switch" @click="commentPop = true">
					<view class="icon-box">
						<image src="../../../static/icon/feed_pinwei_comment.png"></image>
						<text v-if="comment.data.total">{{ comment.data.total }}</text>
					</view>
				</view>
				<view class="item u-flex">
					<image src="../../../static/icon/feed_pinwei_share.png"></image>
					<button class="share-btn" open-type="share">分享</button>
				</view>
			</view>
			<view class="goods-box u-flex" v-if="gids.length != 0">
				<view class="btn u-flex" @click="showGoods">
					<view class="goods-count">
						<image src="../../../static/goods-count.png"></image>
						<text>{{ gids.length }}</text>
					</view>
					<view class="text">立即购买</view>
				</view>
			</view>
		</view>
		<!-- 评论弹窗 -->
		<u-popup v-model="commentPop" mode="bottom" length="90%" border-radius="18" class="comment-pop">
			<view class="title">
				全部评论
				<u-icon class="close" custom-prefix="custom-icon" color="#333" name="close" size="28" @click="commentPop = false"></u-icon>
			</view>
			<view class="no-comment u-flex-col" v-if="!comment.data.total">
				<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/af5f0d10-abaf-11ea-b43d-2358b31b6ce6.png"></image>
				<text>沙发还空着，快来抢吧</text>
			</view>
			<scroll-view scroll-y class="comment-scroll" v-else>
				<view class="item u-flex" v-for="(item, index) in comment.data.records" :key="index">
					<view style="align-self: flex-start;"><image class="avatar" :src="item.avatar"></image></view>
					<view style="flex: 1">
						<view class="user u-flex">
							<text class="nick-name">{{ item.nickName }}</text>
							<text class="date">{{ item.time | date('mm/dd') }}</text>
							<image v-if="!item.support" class="zan" src="../../../static/icon/feed_pinwei_not_fav.png" @click="giveLike(item)"></image>
							<image v-if="item.support" class="zan" src="../../../static/icon/feed_pinwei_fav.png" @click="giveLike(item)"></image>
							<text v-if="item.supportNum" :style="{ color: item.support ? '#FE1F1D' : '#333' }">{{ item.supportNum }}</text>
							<text v-if="!item.supportNum" @click="giveLike(item)">赞</text>
						</view>
						<view class="text u-line-1">{{ item.text }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="input-box u-flex">
				<input type="text" v-model="comment.text" placeholder="发表你的评论" />
				<view class="send" @click="commitComment">发送</view>
			</view>
		</u-popup>
		<!-- 商品盒子弹窗 -->
		<u-popup v-model="goodsPop" mode="bottom" length="60%" border-radius="18" class="goods-pop">
			<view class="title">
				文中商品({{ gids.length }})
				<u-icon class="close" custom-prefix="custom-icon" color="#333" name="close" size="28" @click="goodsPop = false"></u-icon>
			</view>
			<scroll-view scroll-y class="goods-scroll">
				<view class="scroll-wrap">
					<view class="goods-card u-flex" v-for="(item, index) in goodsList" :key="index" @click="goToGoodsDetail(item.gid)">
						<image :src="item.img800s"></image>
						<view class="detail u-flex-col">
							<text class="name u-line-1">{{ item.customName }}</text>
							<view class="label u-flex">
								<text v-for="(item, index) in item.labels" :key="index">{{ item.text }}</text>
							</view>
							<view class="price u-flex">
								<text>￥{{ item.priceMin / 100 }}</text>
								<text v-if="item.priceTag >= 1">起</text>
								<text class="market-price" v-if="item.marketPrice && item.priceMin != item.marketPrice">￥{{ item.marketPrice / 100 }}</text>
								<view class="btn">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-back-top
			:scroll-top="scrollTop"
			:top="1200"
			icon="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_totop_circle_black.png"
			:custom-style="{ backgroundColor: 'transparent' }"
		></u-back-top>
		<mi-toast ref="miToast" />
		<u-skeleton :loading="skeletonLoading" animation bgColor="#FFF" el-color="#eee"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			uuid: '',
			article: {},
			swiperCurrent: 0,
			content: [],
			gids: [],
			goodsList: [],
			likeInfo: {},
			comment: {
				switch: 1,
				text: '',
				data: {}
			},
			recommendList: [],
			isAttention: false,
			isReading: false,
			authorTop: 0,
			videoMask: true,
			showPoster: true,
			commentPop: false,
			goodsPop: false,
			showSkeleton: true,
			skeletonLoading: true,
			scrollTop: 0
		}
	},
	onLoad(e) {
		// console.log(e.uuid)
		this.uuid = e.uuid
		this.getDetail()
	},
	onReady() {
		setTimeout(() => {
			this.videoContext = uni.createVideoContext('video', this)
		}, 200)
		this.getRecommend()
	},
	methods: {
		getDetail() {
			this.$u.api.articleDetail({ uuid: this.uuid }).then(res => {
				console.log(res)
				this.article.pic = res.data.pic
				this.article.title = res.data.title
				this.article.author = res.data.author
				this.article.type = res.data.contentType
				this.comment.switch = res.data.commentSwitch
				this.gids = res.data.gids
				if (this.article.type == 'article') {
					// 字符串解析成JSON对象
					let content = JSON.parse(res.data.resource)
					// 匹配对应位置的图片和商品
					content.blocks.forEach((x, i) => {
						if (x.type == 'atomic') {
							content.blocks[i] = content.entityMap[x.entityRanges[0].key]
						}
					})
					this.content = content.blocks
				} else if (this.article.type == 'note') {
					this.article.pics = res.data.note.pics
					this.content = res.data.resource
				} else if (this.article.type == 'list') {
					this.article.pics = res.data.list.pics
					this.content = res.data.resource
					this.article.videos = res.data.list.videos
				}
				// 赞
				this.likeInfo = res.data.likeInfo
				// 文章内商品
				this.goodsList = res.data.goodsInfo
				// 文章话题
				if (res.data.topicInfo != null) {
					this.$set(this.article, 'topic', res.data.topicInfo.name)
				}
				// 文章评论 
				if (res.data.commentInfo != null) {
					this.comment.data = res.data.commentInfo
				}
				setTimeout(() => {
					this.skeletonLoading = false
					this.showSkeleton = false
				}, 500)
				this.getAuthorTop()
			})
		},
		commitComment() {
			if (this.comment.text.trim() == '') {
				this.showToast('请填写内容后再提交', 'warning')
			} else {
				console.log(this.comment.text)
				var now = new Date().getTime()
				this.comment.data.records.push({
					nickName: this.userInfo.nickName || '未登录用户',
					avatar: this.userInfo.avatarUrl || '/static/avatar_default.png',
					text: this.comment.text,
					support: false,
					supportNum: 0,
					time: now
				})
				this.comment.text = ''
				this.comment.data.total++
				this.showToast('提交评论成功')
			}
		},
		giveLike(item) {
			item.support = !item.support
			const msg = ['你点赞的样子真有品~', '品质生活，从赞开始', '每一个赞都让我们更有品味']
			if (item.support) {
				item.supportNum++
				this.showToast(msg[this.$u.random(0, 2)])
			} else {
				item.supportNum--
			}
		},
		showToast(title, type='success') {
			this.$refs.miToast.show({
				title,
				type
			})
		},
		getRecommend() {
			let data = {
				uuid:this.uuid,
				page:this.$u.random(1, 100),
				pageSize:30
			}
			this.$u.api.articleRecommend(data).then(res => {
				console.log(res)
				this.recommendList = res.data
			})
		},
		likeArticle() {
			this.likeInfo.like = !this.likeInfo.like
			const msg = ['你点赞的样子真有品~', '品质生活，从赞开始', '每一个赞都让我们更有品味', '品味生活，感谢你的喜欢', '哎呦，有品位哦', '欣赏是品味，感谢是人品']
			if (this.likeInfo.like) {
				this.showToast(msg[this.$u.random(0, 5)])
				this.likeInfo.likeNum++
			} else {
				this.likeInfo.likeNum--
			}
		},
		showGoods() {
			if (this.gids.length == 1) {
				uni.navigateTo({
					url: '../../shop/goods/detail/detail?gid=' + this.gids[0]
				})
			} else if (this.gids.length > 1) {
				this.goodsPop = true
				console.log(11)
			}
		},
		swiperChange(e) {
			this.swiperCurrent = e.target.current
		},
		playVideo() {
			this.showPoster = false
			this.videoMask = false
			this.videoContext.play()
		},
		videoEnd() {
			this.showPoster = true
			this.videoMask = true
		},
		getAuthorTop() {
			setTimeout(() => {
				uni.createSelectorQuery()
					.select('#author')
					.boundingClientRect(data => {
						// console.log(data)
						this.authorTop = data.top
					})
					.exec()
			}, 500)
		},
		attention() {
			this.isAttention = !this.isAttention
			if (this.isAttention) {
				this.showToast('品味相投，关注成功~')
			}
		},
		back() {
			uni.navigateBack({
				delta: '1'
			})
		},
		goToGoodsDetail(gid) {
			uni.navigateTo({
				url: '../../shop/goods/detail/detail?gid=' + gid
			})
		},
		// 预览大图
		previewImg(url) {
			if (typeof url == 'string') {
				url = url.split()
			}
			uni.previewImage({
				urls: url,
				fail() {
					this.showToast('图片预览失败，请稍后再试', 'error')
				}
			})
		},
		goToDetail(uuid) {
			uni.reLaunch({
				url: './detail?uuid=' + uuid
			})
		}
	},
	onPageScroll(e) {
		// console.log(e)
		if (e.scrollTop > this.authorTop) {
			this.isReading = true
		} else {
			this.isReading = false
		}
		this.scrollTop = e.scrollTop
	},
	onShareAppMessage(res) {
		return {
			title: '推荐你一篇好文章，来看看吧~',
			path: '/pages/life/detail/detail?uuid=' + this.uuid
			// imageUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/6ece8d90-8a3d-11ea-b94e-47f67ecf8268.png'
		}
	}
}
</script>

<style lang="scss">
.top {
	position: fixed;
	top: 0;
	width: 750rpx;
	z-index: 100;
	.back {
		justify-content: center;
		margin-left: 16rpx;
		padding-right: 4rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: rgba($color: #000000, $alpha: 0.2);
	}
	.author {
		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			margin: 0 20rpx;
		}
		.nickname {
			font-size: 28rpx;
			font-weight: bold;
		}
	}
}
.top-img {
	width: 750rpx;
	// height: 564rpx;
	image {
		width: inherit;
		height: inherit;
	}
}

.swiper {
	position: relative;
	width: 750rpx;
	height: 750rpx;
	swiper {
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.count {
		position: absolute;
		bottom: 54rpx;
		right: 0;
		padding: 0 10rpx;
		width: 80rpx;
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 18rpx 0 0 18rpx;
		font-size: 20rpx;
		text-align: center;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.2);
		font-family: 'AllAndNone';
		span:nth-child(1) {
			font-size: 26rpx;
			margin-left: 4rpx;
		}
		span:nth-child(2) {
			// font-size: 26rpx;
			margin: 0 4rpx;
		}
	}
}
.content {
	padding: 0 30rpx;
	.author {
		// margin: 30rpx 0;
		padding: 30rpx 0;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			margin-right: 22rpx;
		}
		.nickname {
			font-size: 28rpx;
			font-weight: bold;
		}
		.attention {
			margin-left: auto;
			justify-content: center;
			width: 128rpx;
			height: 56rpx;
			color: #fff;
			font-size: 24rpx;
			// font-weight: bold;
			border-radius: 28rpx;
			background: linear-gradient(to right, #ffba34, #ff9a40);
			text {
				margin-left: 6rpx;
			}
			&:active {
				opacity: 0.8;
			}
		}
		.attentioned {
			color: #b3b1b6 !important;
			background: #f8f6f9 !important;
		}
	}
	.title {
		margin: 10rpx 0 20rpx 0;
		font-size: 40rpx;
		font-weight: bold;
	}
	.rich-text {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		line-height: 54rpx;
		.text {
			display: inline-block;
			padding: 16rpx 0;
			background-color: transparent;
		}
		.img {
			width: 100%;
			border-radius: 18rpx;
		}

		// text-indent: 1.2em;
	}
	.basic-text {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		text {
			display: inline-block;
			padding: 16rpx 0;
			line-height: 54rpx;
		}
	}
	.video-box {
		position: relative;
		margin-bottom: 30rpx;
		width: 100%;
		height: 452rpx;
		border-radius: 16rpx;
		overflow: hidden;
		video {
			width: 100%;
			height: 100%;
		}
		.poster,
		.video-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.poster {
			z-index: 1;
		}
		.video-mask {
			background-color: rgba($color: #000000, $alpha: 0.2);
			z-index: 2;
			.play-btn {
				image {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 88rpx;
					height: 88rpx;
					transform: translate(-50%, -50%);
					z-index: 2;
				}
			}
		}
	}
}
.goods-card {
	margin-bottom: 30rpx;
	padding: 23rpx 22rpx 23rpx 32rpx;
	width: 100%;
	height: 206rpx;
	border: 2rpx solid #e9ebf0;
	border-radius: 18rpx;
	image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
	}
	.detail {
		margin-left: 28rpx;
		height: 160rpx;
		font-weight: bold;
		.name {
			// width: 100%;
			width: 440rpx;
			line-height: 42rpx;
		}
		.label {
			margin-top: 10rpx;
			text {
				display: inline-block;
				padding: 0 8rpx;
				margin-right: 10rpx;
				height: 32rpx;
				line-height: 32rpx;
				font-weight: normal;
				font-size: 20rpx;
				color: #ff1b1b;
				border: 2rpx solid rgba($color: #ff1b1b, $alpha: 0.5);
				border-radius: 10rpx;
			}
		}
		.price {
			margin-top: auto;
			width: 440rpx;
			.market-price {
				margin-left: 6rpx;
				font-weight: normal;
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
			}
			.btn {
				margin-left: auto;
				padding: 0 18rpx;
				height: 48rpx;
				line-height: 48rpx;
				color: #fff;
				font-size: 24rpx;
				border-radius: 24rpx;
				font-weight: normal;
				background-color: #ff1b1b;
				&:active {
					opacity: 0.8;
				}
			}
		}
	}
}
.topic {
	display: inline-block;
	margin: 30rpx;
	padding: 4rpx 18rpx;
	width: auto;
	font-size: 26rpx;
	color: #986c2a;
	background-color: #fff5d5;
	border-radius: 6rpx;
	.sign {
		margin-right: 10rpx;
	}
}
.card {
	padding: 32rpx 28rpx;
	.head {
		font-size: 28rpx;
		color: #292a2c;
		font-weight: bold;
	}
}
.comment {
	.edit {
		margin-left: auto;
		color: #996b3d;
		text {
			margin-left: 6rpx;
		}
	}
	.no-comment {
		align-items: center;
		margin: 20rpx 0;
		font-size: 24rpx;
		color: #9d9fa5;
		image {
			width: 200rpx;
			height: 200rpx;
		}
	}
	.have-comment {
		// height: ;
		.item-box {
			max-height: 324rpx;
			overflow: hidden;
		}
		.item {
			padding: 32rpx 0;
			font-size: 26rpx;
			color: #333;
			border-bottom: 1rpx solid #f0f0f0;
			.avatar {
				width: 56rpx;
				height: 56rpx;
				border-radius: 28rpx;
				margin-right: 20rpx;
			}
			.user {
				flex: 1;
				.nick-name {
					font-size: 28rpx;
					font-weight: bold;
				}
				.date {
					margin-left: 10rpx;
					font-size: 22rpx;
					color: #c1c3c9;
				}
				.zan {
					margin-left: auto;
					margin-right: 6rpx;
					height: 32rpx;
					width: 32rpx;
				}
			}
			.text {
				margin-top: 20rpx;
			}
		}
		.all {
			justify-content: center;
			margin-top: 20rpx;
			text-align: center;
			font-weight: bold;
			color: #956535;
			// image {
			// 	height: 21rpx;
			// 	width: 28rpx;
			// }
			// u-icon{
			// 	transform: rotateX('180deg');
			// }
		}
	}
}
.left {
	padding: 0 14rpx 0 0;
}
.right {
	padding: 0 0 0 14rpx;
}
.recommend {
	background-color: #fdfdfd;
	.content {
		margin-top: 20rpx;
		.item {
			width: 100%;
			padding-bottom: 20rpx;
			margin-bottom: 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			border: 1rpx solid #f3f3f3;
			// box-shadow: 0 2rpx 6rpx 2rpx rgba($color: #ddd, $alpha: 0.2);
			overflow: hidden;
			.img {
				width: 100%;
				border-radius: 12rpx 12rpx 0 0;
			}
			.title {
				font-size: 24rpx;
				color: #333;
				font-weight: bold;
				padding: 10rpx 20rpx;
			}
			.author {
				margin-top: 20rpx;
				padding: 0 20rpx;
				color: #666;
				font-size: 22rpx;
				image {
					width: 36rpx;
					height: 36rpx;
					min-width: 36rpx;
					border-radius: 18rpx;
					margin-right: 12rpx;
				}
				.name {
					max-width: 160rpx;
				}
				.reading {
					margin-left: auto;
				}
			}
		}
	}
}
.bottom-menu {
	position: fixed;
	bottom: 0;
	height: 106rpx;
	width: 750rpx;
	background-color: #fff;
	box-shadow: 0rpx -2rpx 6rpx rgba($color: #eee, $alpha: 0.6);
	z-index: 100;
	.function {
		flex: 1;
		height: 100%;
		// background-color: salmon;
		.item {
			position: relative;
			flex: 1;
			height: 100%;
			justify-content: center;
			.icon-box {
				position: relative;
			}
			image {
				width: 48rpx;
				height: 48rpx;
			}
			text {
				position: absolute;
				top: -12rpx;
				left: 46rpx;
				font-size: 26rpx;
				color: #292a2d;
				font-family: 'KMedium';
			}
			.share-btn {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 101;
				opacity: 0;
			}
		}
	}
	.goods-box {
		width: 40%;
		height: 100%;
		padding: 16rpx 32rpx;
		// background-color: skyblue;
		.btn {
			justify-content: space-between;
			width: 100%;
			height: 100%;
			padding: 14rpx 32rpx;
			border-radius: 60rpx;
			background: linear-gradient(to right, #fb7527, #e65301);
			.goods-count {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				text-align: center;
				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 0;
				}
				text {
					position: relative;
					line-height: 46rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #f3610d;
					z-index: 1;
				}
			}
			.text {
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
}
.goods-pop,
.comment-pop {
	position: relative;
	.title {
		position: relative;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		border-bottom: 1rpx solid #f3f3f3;
		.close {
			position: absolute;
			right: 48rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}
.comment-pop {
	.no-comment {
		align-items: center;
		margin: 200rpx 0;
		font-size: 24rpx;
		color: #9d9fa5;
		image {
			width: 200rpx;
			height: 200rpx;
		}
	}
	.comment-scroll {
		height: 1010rpx;
		.item {
			padding: 32rpx 20rpx;
			font-size: 26rpx;
			color: #333;
			border-bottom: 1rpx solid #f0f0f0;
			.avatar {
				width: 56rpx;
				height: 56rpx;
				border-radius: 28rpx;
				margin-right: 20rpx;
			}
			.user {
				flex: 1;
				.nick-name {
					font-size: 28rpx;
					font-weight: bold;
				}
				.date {
					margin-left: 10rpx;
					font-size: 22rpx;
					color: #c1c3c9;
				}
				.zan {
					margin-left: auto;
					margin-right: 6rpx;
					height: 32rpx;
					width: 32rpx;
				}
			}
			.text {
				margin-top: 20rpx;
			}
		}
	}
	.input-box {
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		padding: 18rpx 28rpx;
		width: 100%;
		height: 100rpx;
		border-top: 1rpx solid #f3f3f3;
		// background-color: salmon;
		input {
			width: 86%;
			height: 100%;
			padding-left: 20rpx;
			border-radius: 8rpx;
			background-color: #eee;
		}
		.send {
			color: #956535;
			font-weight: bold;
			font-size: 28rpx;
		}
	}
}

.goods-pop {
	.title {
		border-bottom: none;
	}
	.goods-scroll {
		height: 710rpx;
		.scroll-wrap {
			padding: 0 24rpx 0;
		}
	}
}
.container {
	.top-img {
		height: 560rpx;
	}
	.box {
		padding: 0 30rpx;
		.author {
			margin: 30rpx 0;
			.avatar {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}
			.nickname {
				height: 42rpx;
				width: 200rpx;
			}
		}
		.title {
			margin: 30rpx 0;
			height: 64rpx;
			width: 80%;
		}
		.text {
			margin: 30rpx 0 300rpx;
			view {
				margin: 50rpx 0;
				height: 50rpx;
			}
		}
	}
}
.u-back-top {
	image {
		width: 80rpx;
		height: 80rpx;
	}
}
</style>
